import { useState, useEffect, useRef } from 'react';
import { motion, useInView } from 'framer-motion';
import { useNavigate } from 'react-router-dom';
import Header from '@/components/Header';
import Profile from '@/components/Profile';
import Skills from '@/components/Skills';
import Interests from '@/components/Interests';
import Education from '@/components/Education';
import Experience from '@/components/Experience';
import Projects from '@/components/Projects';

const ResumePage = () => {
  const navigate = useNavigate();
  const [activeSection, setActiveSection] = useState('profile');
  const ref = useRef(null);
  
  // Handle scroll to section
  const scrollToSection = (sectionId: string) => {
    setActiveSection(sectionId);
    const element = document.getElementById(sectionId);
    if (element) {
      window.scrollTo({
        top: element.offsetTop - 80,
        behavior: 'smooth'
      });
    }
  };

  return (
    <div className="min-h-screen relative z-10">
      {/* Header with navigation */}
      <Header 
        activeSection={activeSection} 
        onSectionChange={scrollToSection}
        onBackToLanding={() => navigate('/')}
      />
      
      {/* Main Content */}
      <main className="container mx-auto px-4 py-20 max-w-7xl">
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-10">
          {/* Left Column */}
          <div className="lg:col-span-1 space-y-8">
            <Profile />
            <Skills />
            <Interests />
          </div>
          
          {/* Right Column */}
          <div className="lg:col-span-2 space-y-8">
            <Education />
            <Experience />
            <Projects />
          </div>
        </div>
      </main>
    </div>
  );
}

export default ResumePage;